<template>
  <div class="table_div">
    <!-- 表格 -->
    <table>
      <!-- 表头 -->
      <tr>
        <th v-for="t in param.title">{{t.name}}</th>
        <!-- 操作部分 -->
        <th v-if="param.btns != null">操作</th>
      </tr>
      <!-- 内容 -->
      <tr v-for="d in tableDatas">
        <!-- 表格中的每一个列的数据 -->
        <td v-for="t in param.title">
          <span v-if="t.type == 'image'">
              <!-- 图片 -->
              <el-image class="table_img" fit="cover"
                :src="'http://localhost/res/img/get?fileName=' + d[t.col]">
              </el-image>
          </span>
          <span v-else>
              <!-- 文本 -->
              <span v-if="d[t.col] != null && d[t.col] !== ''">
                <!-- 是否有预处理的方法 -->
                {{t.dyncFunction ? t.dyncFunction(d[t.col]) : d[t.col]}}
              </span>
              <span v-else>
                {{t.default}}
              </span>
          </span>
        </td>
        <!-- 操作部分 -->
        <td v-if="param.btns != null">
          <button
           v-for="(btn,i) in param.btns"
           v-if="btn.show == null || btn.show(d)"
           @click="btn.click(d)">{{btn.btnName}}</button>
        </td>
      </tr>
    </table>

    <!-- 分页导航 -->
    <div class="page_div" v-if="page.enable">
      <button @click="requestPage(1)">首页</button>
      <button @click="requestPage(page.pageNum - 1)">上一页</button>
      <button @click="requestPage(page.pageNum + 1)">下一页</button>
      <button @click="requestPage(page.pageTotle)">尾页</button>
      <button disabled="disabled">
        当前第{{page.pageNum}}页/共{{page.pageTotle}}页
      </button>
    </div>
  </div>
</template>

<!-- [
    {name:编号, col:cid},
    {name:姓名, col:name, type:image},
    {name:年龄, col:age}
]

[
  {"cid":"1", "name":"小明", "age":19...},
  {"cid":"1", "name":"小明", "age":19...},
  {"cid":"1", "name":"小明", "age":19...},
  {"cid":"1", "name":"小明", "age":19...}
]

http://xxxxxxxx/list -->

<script>
export default {
  //接收父组件的参数
  props: {
    // //表格的标题 - 表头
    // title: {
    //   type: Array
    // },
    // //表格数据请求的url
    // url: {
    //   type: String
    // },
    // //请求的参数
    // data: {
    //   type: Object
    // }
    param: {
      type: Object
    },
    search: {
      type: Object
    }
  },
  data(){
    return {
      //表格的数据
      tableDatas: [],
      //分页的参数
      page: {
        enable: false,
        pageNum: 1,
        pageSize: 10,
        pageTotle: 0
      }
    }
  },
  methods: {
    //请求数据的方法
    request(){
      var localUrl = this.param.url;
      //组装url
      if(this.page.enable){
         //开启分页
         localUrl = localUrl + "?pageNum=" + this.page.pageNum + "&pageSize=" + this.page.pageSize;
      }

      this.$.ajax({
        type: this.param.type ? this.param.type : 'GET',
        url: localUrl,
        data: this.search,
        success: (d) => {
          this.tableDatas = d.data;
          //更新共有多少页数据
          if(this.page.enable){
              //更新总页码
              this.page.pageTotle = d.page.total;
          }
        }
      });
    },
    //分页请求
    requestPage(pageNum){
      //解决边界问题
      if(pageNum < 1) {
        pageNum = 1;
      }
      if(pageNum > this.page.pageTotle){
        pageNum = this.page.pageTotle;
      }
      //修改当前页
      this.page.pageNum = pageNum;
      //重新发送请求
      this.request();
    }
  },
  //页面加载时触发
  mounted(){

    //根据分页的的参数来组装查询的url
    if(this.param.page != null && this.param.page.enable){
       //需要分页
       this.page.enable = true;
       this.page.pageSize = this.param.page.pageSize;
    }

    //发送请求获取数据
    this.request();
  }
}
</script>

<style>

.table_img {
  width: 100px;
  height: 70px;
  border-radius: 4px;
  box-shadow: 4px 4px 4px gray;
}

.table_div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.table_div table {
  /* border-radius: 10px; */
  /* box-shadow: 10px 10px 10px gray; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  background-color: #E9EEF3;
  width: 100%;
}

.table_div table th {
  background-color: #DCDCDC;
  padding: 10px 20px;
  color: black;
}

.table_div table td {
  padding: 10px 20px;
}

.table_div table tr:nth-child(odd) {
  background-color: white;
}

.table_div table tr:nth-child(even) {
  background-color: white;
}

.table_div button {
  padding: 5px 20px;
  margin-left: 5px;
  /* font-family: "宋体"; */
  font-weight: 900;
  color: whitesmoke;
  background-color: #42B983;
  border-radius: 5px;
  box-shadow: 4px 4px 4px gray;
}

.page_div {
  margin-top: 20px;
}

</style>
